<!doctype html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<script src="../lib/rem.js"></script>
		<link rel="stylesheet" href="../css/reset.css" />
		<title>行业tab</title>
		<style type="text/css">
			.hyTab{
				display: flex;
				justify-content: space-between;
				width: 100%;
				min-height: 10rem;
				font-size: .28rem;
				color: #1d1d1d;
			}
			.hyTab .hyHead {
				width: 34%;
				background-color: #FFFFFF;
			}
			.hyTab .hyHead li{
				padding-left: .3rem;
				height: .82rem;
				line-height: .82rem;
				border: 1px solid #e0e0e0;
				margin-top: -1px;
			}
			.hyTab .hyHead li.on{
				background-color: #f4f4f9;
				border-right: none;
			}
			.hyBody{
				width: 66%;
				background-color: #f4f4f9;
				
			}
			.hyBody .iner-list{
				display: none;
			}
			.hyBody .iner-list ul li{
				height: .82rem;
				line-height: .82rem;
				padding-left: .9rem;
				border: 1px solid #e0e0e0;
				margin-top: -1px;
				border-left:none ;
			}
			.hyBody .iner-list ul li.active{
				background: #f4f4f9 url(../images/未标题-1.png) .3rem center no-repeat;
				background-size: .34rem .28rem;
				color: #2cb7ca;
			}
		</style>
	</head>
	<body>
		<div class="hyTab">
			<ul class="hyHead">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
			<div class="hyBody">
				<div style="display: block;" class="iner-list">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
					</ul>
				</div>
				<div class="iner-list">
					<ul>
						<li>4</li>
						<li>5</li>
						<li>6</li>
					</ul>
				</div>
				<div class="iner-list">
					<ul>
						<li>7</li>
						<li>8</li>
						<li>9</li>
					</ul>
				</div>
				<div class="iner-list">
					<ul>
						<li>10</li>
						<li>11</li>
						<li>12</li>
					</ul>
				</div>
				<div class="iner-list">
					<ul>
						<li>13</li>
						<li>14</li>
						<li>15</li>
						<li>13</li>
						<li>14</li>
						<li>15</li>
						<li>13</li>
						<li>14</li>
						<li>15</li>
					</ul>
				</div>
				
			</div>
		</div>
		<script type="text/javascript" src="../lib/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var $leftTab = $(".hyTab .hyHead li"),
					$inerLists = $(".hyTab .hyBody .iner-list");
				$leftTab.on('click',function(){
					$(this).addClass('on').siblings().removeClass("on");
					$inerLists.eq($(this).index()).show().siblings().hide();
					
				})
				
				$inerLists.on('click','li',function(){
					$(this).addClass('active').siblings().removeClass("active")
				})
			})
		</script>
	</body>
	
</html>